import React, { useEffect, useState } from "react";
import instance from "../../api/request";
import styles from "./Index.module.css";
import { Tabs } from "antd-mobile";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
function Index() {
  const nav = useNavigate();
  const [list, setList] = useState([]);
  const [page] = useState(1);
  const [count] = useState(5);

  useEffect(() => {
    instance
      .get("/api/user/verify/v1/findUserSickCollectionList", {
        params: {
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res, "====收藏列表");
        setList(res.data.result);
      });
  }, [page, count]);

  return (
    <div className={styles.shouzong}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)}>我的收藏</NavBar>
      </div>

      <div>
        <Tabs>
          <Tabs.Tab title="健康咨询" key="fruits">
            健康咨询
          </Tabs.Tab>
          <Tabs.Tab title="健康视频" key="vegetables">
            健康视频
          </Tabs.Tab>

          <Tabs.Tab title="病友圈" key="animals">
            {list.map((item, index) => {
              return (
                <div key={index} className={styles.list} onClick={()=>nav(`/bingydetail/${item.sickCircleId}`)}>
                  <div style={{ marginTop: "19px" }}>
                    <h1 style={{marginLeft:'19px'}}>{item.title}</h1>
                  </div>
                  <div style={{ marginTop: "19px" ,marginLeft:'19px'}}>{item.disease}</div>
                  <div className={styles.footer} style={{ marginTop: "19px" ,marginLeft:'19px'}}>
                    <div>
                      收藏{item.collectionNum}
                      <span style={{marginLeft:'10px'}}>建议{item.commentNum}</span>
                    </div>

                    <div style={{marginLeft:'-10px'}}>{dayjs(item.createTime).format("YYYY-MM-DD")}</div>
                  </div>
                </div>
              );
            })}
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export default Index;
